<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      th:replace="~{layout/base :: layout(~{::title}, ~{::section})}">
<head>
    <meta charset="UTF-8">
    <title th:text="${booklist.listName + ' - 电子书下载平台'}">书单名称 - 电子书下载平台</title>
</head>
<body>
    <section>
        <div class="container py-5">
            <!-- 书单基本信息 -->
            <div class="card mb-4">
                <div class="card-header" th:style="'background-color:' + ${booklist.colorTag != null ? booklist.colorTag : '#6c757d'}">
                    <div class="d-flex justify-content-between align-items-center">
                        <h2 class="text-white mb-0" th:text="${booklist.listName}">书单名称</h2>
                        
                        <!-- 收藏按钮 -->
                        <div sec:authorize="isAuthenticated()" th:if="${!isCreator}">
                            <button class="btn btn-light" id="favoriteBtn" 
                                    th:data-list-id="${booklist.listId}" 
                                    th:data-is-favorite="${isFavorited}">
                                <i class="far fa-heart" th:classappend="${isFavorited ? 'fas' : 'far'}"></i>
                                <span th:text="${isFavorited ? '已收藏' : '收藏'}">收藏</span>
                            </button>
                        </div>
                        
                        <!-- 编辑按钮（仅创建者可见） -->
                        <div sec:authorize="isAuthenticated()" th:if="${isCreator}">
                            <a th:href="@{'/user/booklists/' + ${booklist.listId} + '/books'}" class="btn btn-light me-2">
                                <i class="fas fa-edit me-1"></i>管理书籍
                            </a>
                            <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#editBooklistModal">
                                <i class="fas fa-cog me-1"></i>设置
                            </button>
                        </div>
                        
                        <!-- 登录提示 -->
                        <div sec:authorize="!isAuthenticated()">
                            <a th:href="@{/login}" class="btn btn-light">
                                <i class="far fa-heart me-1"></i>登录后收藏
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <!-- 书单元数据 -->
                        <div class="col-md-8">
                            <div class="mb-3">
                                <span class="text-muted me-3">
                                    <i class="fas fa-user me-1"></i>
                                    创建者: <a th:href="@{'/user/profile/' + ${booklist.creatorId}}" 
                                           th:text="${booklist.creatorNickname}">用户昵称</a>
                                </span>
                                <span class="me-3">
                                    <i class="fas fa-book me-1"></i>
                                    <span th:text="${booklist.bookCount + ' 本书'}">25 本书</span>
                                </span>
                                <span class="me-3">
                                    <i class="far fa-heart me-1"></i>
                                    <span th:text="${booklist.favoriteCount + ' 人收藏'}">32 人收藏</span>
                                </span>
                                <span class="text-muted">
                                    <i class="far fa-calendar-alt me-1"></i>
                                    <span th:text="${#temporals.format(booklist.createdAt, 'yyyy-MM-dd')}">2023-01-15</span>
                                </span>
                            </div>
                            
                            <div class="mb-4">
                                <h5>书单简介</h5>
                                <p th:text="${booklist.description}">这是书单的描述，详细介绍这个书单的主题和内容特点...</p>
                            </div>
                        </div>
                        
                        <!-- 书单封面展示 -->
                        <div class="col-md-4">
                            <div class="booklist-cover-preview">
                                <div class="booklist-covers-grid" th:if="${bookCovers != null && !bookCovers.isEmpty()}">
                                    <div th:each="cover, stat : ${bookCovers}" th:if="${stat.index < 4}" class="cover-item">
                                        <img th:src="${cover != null ? cover : '/img/default-cover.jpg'}" 
                                             alt="书籍封面" class="booklist-cover-preview-img">
                                    </div>
                                </div>
                                <!-- 静态封面（当没有动态数据时显示） -->
                                <div class="booklist-covers-grid" th:if="${bookCovers == null || bookCovers.isEmpty()}">
                                    <div class="cover-item">
                                        <img src="/img/book1.jpg" alt="书籍封面" class="booklist-cover-preview-img">
                                    </div>
                                    <div class="cover-item">
                                        <img src="/img/book2.jpg" alt="书籍封面" class="booklist-cover-preview-img">
                                    </div>
                                    <div class="cover-item">
                                        <img src="/img/book3.jpg" alt="书籍封面" class="booklist-cover-preview-img">
                                    </div>
                                    <div class="cover-item">
                                        <img src="/img/book4.jpg" alt="书籍封面" class="booklist-cover-preview-img">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 书籍列表和搜索 -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">书单内容</h5>
                                
                                <!-- 搜索框 -->
                                <div class="d-flex">
                                    <form th:action="@{'/booklists/' + ${booklist.listId}}" method="get" class="d-flex">
                                        <input type="text" name="q" class="form-control me-2" placeholder="搜索书单内书籍..."
                                               th:value="${param.q}">
                                        <button class="btn btn-outline-primary" type="submit">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <!-- 书籍列表 -->
                            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                                <!-- 动态数据 -->
                                <div class="col" th:each="book : ${books}">
                                    <div class="card h-100 book-card">
                                        <div class="row g-0">
                                            <div class="col-4">
                                                <img th:src="${book.coverUrl != null ? book.coverUrl : '/img/default-cover.jpg'}" 
                                                     class="img-fluid book-list-cover" alt="书籍封面">
                                            </div>
                                            <div class="col-8">
                                                <div class="card-body">
                                                    <h5 class="card-title text-truncate">
                                                        <a th:href="@{'/books/' + ${book.bookId}}" th:text="${book.title}">书籍标题</a>
                                                    </h5>
                                                    <p class="card-text mb-1">
                                                        <small class="text-muted" th:text="${book.author}">作者名</small>
                                                    </p>
                                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                                        <div class="rating">
                                                            <i class="fas fa-star"></i>
                                                            <span th:text="${book.rating}">4.5</span>
                                                        </div>
                                                        <div>
                                                            <span th:each="format : ${book.availableFormats}" class="badge me-1"
                                                                  th:classappend="${format == 'PDF' ? 'bg-danger' : (format == 'EPUB' ? 'bg-primary' : 'bg-success')}"
                                                                  th:text="${format}">PDF</span>
                                                        </div>
                                                    </div>
                                                    <div class="mt-2">
                                                        <a th:href="@{'/books/' + ${book.bookId}}" class="btn btn-sm btn-outline-primary">
                                                            查看详情
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 静态数据（当没有动态数据时显示） -->
                                <div class="col" th:if="${books == null || #lists.isEmpty(books)}">
                                    <div class="card h-100 book-card">
                                        <div class="row g-0">
                                            <div class="col-4">
                                                <img src="/img/book1.jpg" class="img-fluid book-list-cover" alt="书籍封面">
                                            </div>
                                            <div class="col-8">
                                                <div class="card-body">
                                                    <h5 class="card-title text-truncate"><a href="/books/1">人工智能导论</a></h5>
                                                    <p class="card-text mb-1"><small class="text-muted">李智能</small></p>
                                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                                        <div class="rating">
                                                            <i class="fas fa-star"></i>
                                                            <span>4.8</span>
                                                        </div>
                                                        <div>
                                                            <span class="badge bg-danger me-1">PDF</span>
                                                            <span class="badge bg-primary">EPUB</span>
                                                        </div>
                                                    </div>
                                                    <div class="mt-2">
                                                        <a href="/books/1" class="btn btn-sm btn-outline-primary">
                                                            查看详情
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col" th:if="${books == null || #lists.isEmpty(books)}">
                                    <div class="card h-100 book-card">
                                        <div class="row g-0">
                                            <div class="col-4">
                                                <img src="/img/book2.jpg" class="img-fluid book-list-cover" alt="书籍封面">
                                            </div>
                                            <div class="col-8">
                                                <div class="card-body">
                                                    <h5 class="card-title text-truncate"><a href="/books/2">Python编程：从入门到实践</a></h5>
                                                    <p class="card-text mb-1"><small class="text-muted">张程序</small></p>
                                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                                        <div class="rating">
                                                            <i class="fas fa-star"></i>
                                                            <span>4.6</span>
                                                        </div>
                                                        <div>
                                                            <span class="badge bg-danger me-1">PDF</span>
                                                            <span class="badge bg-success">MOBI</span>
                                                        </div>
                                                    </div>
                                                    <div class="mt-2">
                                                        <a href="/books/2" class="btn btn-sm btn-outline-primary">
                                                            查看详情
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col" th:if="${books == null || #lists.isEmpty(books)}">
                                    <div class="card h-100 book-card">
                                        <div class="row g-0">
                                            <div class="col-4">
                                                <img src="/img/book3.jpg" class="img-fluid book-list-cover" alt="书籍封面">
                                            </div>
                                            <div class="col-8">
                                                <div class="card-body">
                                                    <h5 class="card-title text-truncate"><a href="/books/3">数据结构与算法分析</a></h5>
                                                    <p class="card-text mb-1"><small class="text-muted">王数据</small></p>
                                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                                        <div class="rating">
                                                            <i class="fas fa-star"></i>
                                                            <span>4.5</span>
                                                        </div>
                                                        <div>
                                                            <span class="badge bg-primary me-1">EPUB</span>
                                                        </div>
                                                    </div>
                                                    <div class="mt-2">
                                                        <a href="/books/3" class="btn btn-sm btn-outline-primary">
                                                            查看详情
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 无书籍提示 -->
                            <div class="text-center py-5" th:if="${books != null && books.isEmpty() && !searchMode}">
                                <i class="fas fa-book fa-4x text-muted mb-3"></i>
                                <h4 class="text-muted">这个书单还没有书籍</h4>
                                <p th:if="${isCreator}">点击"管理书籍"按钮添加书籍到此书单</p>
                            </div>
                            
                            <!-- 搜索无结果提示 -->
                            <div class="text-center py-5" th:if="${books != null && books.isEmpty() && searchMode}">
                                <i class="fas fa-search fa-4x text-muted mb-3"></i>
                                <h4 class="text-muted">未找到匹配的书籍</h4>
                                <p>尝试使用不同的搜索关键词</p>
                                <a th:href="@{'/booklists/' + ${booklist.listId}}" class="btn btn-outline-primary mt-2">
                                    查看所有书籍
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 分页控件 -->
            <nav aria-label="Page navigation" th:if="${totalPages > 1}" class="mt-4">
                <ul class="pagination justify-content-center">
                    <li class="page-item" th:classappend="${currentPage == 1} ? 'disabled' : ''">
                        <a class="page-link" 
                           th:href="@{'/booklists/' + ${booklist.listId} + '?page=' + ${currentPage - 1} + (${param.q != null ? '&q=' + param.q : ''})}" 
                           aria-label="上一页">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    
                    <li class="page-item" th:each="i : ${#numbers.sequence(1, totalPages)}" 
                        th:classappend="${i == currentPage} ? 'active' : ''">
                        <a class="page-link" 
                           th:href="@{'/booklists/' + ${booklist.listId} + '?page=' + ${i} + (${param.q != null ? '&q=' + param.q : ''})}" 
                           th:text="${i}">1</a>
                    </li>
                    
                    <li class="page-item" th:classappend="${currentPage == totalPages} ? 'disabled' : ''">
                        <a class="page-link" 
                           th:href="@{'/booklists/' + ${booklist.listId} + '?page=' + ${currentPage + 1} + (${param.q != null ? '&q=' + param.q : ''})}" 
                           aria-label="下一页">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            
            <!-- 评论区 -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="mb-0">评论区</h5>
                </div>
                <div class="card-body">
                    <!-- 添加评论表单 -->
                    <div class="mb-4" sec:authorize="isAuthenticated()">
                        <form th:action="@{'/api/comment/booklist/' + ${booklist.listId}}" method="post">
                            <div class="mb-3">
                                <textarea class="form-control" id="commentContent" name="content" rows="3" placeholder="对这个书单有什么看法？" required></textarea>
                            </div>
                            <div class="text-end">
                                <button type="submit" class="btn btn-primary">发表评论</button>
                            </div>
                        </form>
                    </div>
                    
                    <!-- 登录提示 -->
                    <div class="text-center py-3 mb-3" sec:authorize="!isAuthenticated()">
                        <p>请<a th:href="@{/login}">登录</a>后参与评论</p>
                    </div>
                    
                    <!-- 评论列表 -->
                    <div th:if="${comments != null && !comments.isEmpty()}">
                        <!-- 动态评论内容 -->
                        <div th:each="comment : ${comments}" class="comment-item mb-4">
                            <div class="d-flex">
                                <div class="flex-shrink-0">
                                    <img th:src="${comment.avatar != null ? comment.avatar : '/img/default-avatar.jpg'}" 
                                         class="rounded-circle" width="50" height="50" alt="用户头像">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <div>
                                            <a th:href="@{'/user/profile/' + ${comment.userId}}" class="fw-bold" th:text="${comment.nickname}">用户昵称</a>
                                            <small class="text-muted ms-2" th:text="${#temporals.format(comment.createdAt, 'yyyy-MM-dd HH:mm')}">2023-01-15 12:30</small>
                                        </div>
                                        <button class="btn btn-sm text-muted like-button" th:data-comment-id="${comment.commentId}"
                                                th:classappend="${comment.userLiked ? 'liked' : ''}">
                                            <i class="far fa-heart" th:classappend="${comment.userLiked ? 'fas' : 'far'}"></i>
                                            <span class="like-count" th:text="${comment.likes}">12</span>
                                        </button>
                                    </div>
                                    <div class="comment-bubble mb-2" th:text="${comment.content}">评论内容</div>
                                    
                                    <!-- 回复链接 -->
                                    <div class="d-flex text-muted">
                                        <a href="#" class="reply-link" sec:authorize="isAuthenticated()"
                                           th:data-comment-id="${comment.commentId}"
                                           th:data-user-name="${comment.nickname}">
                                            <small><i class="fas fa-reply me-1"></i>回复</small>
                                        </a>
                                    </div>
                                    
                                    <!-- 回复表单 -->
                                    <div th:id="${'replyForm-' + comment.commentId}" class="reply-form mt-2" style="display: none;">
                                        <form th:action="@{'/api/comment/booklist/' + ${booklist.listId}}" method="post">
                                            <input type="hidden" name="parentCommentId" th:value="${comment.commentId}">
                                            <div class="input-group">
                                                <input type="text" class="form-control form-control-sm" name="content"
                                                       th:placeholder="${'回复 @' + comment.nickname}" required>
                                                <button class="btn btn-outline-primary btn-sm" type="submit">发送</button>
                                            </div>
                                        </form>
                                    </div>
                                    
                                    <!-- 回复列表 -->
                                    <div class="replies mt-2" th:if="${comment.replies != null && !comment.replies.isEmpty()}">
                                        <div th:each="reply : ${comment.replies}" class="reply-item ms-4 mb-2">
                                            <div class="d-flex">
                                                <div class="flex-shrink-0">
                                                    <img th:src="${reply.avatar != null ? reply.avatar : '/img/default-avatar.jpg'}" 
                                                         class="rounded-circle" width="35" height="35" alt="用户头像">
                                                </div>
                                                <div class="flex-grow-1 ms-2">
                                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                                        <div>
                                                            <a th:href="@{'/user/profile/' + ${reply.userId}}" class="fw-bold" th:text="${reply.nickname}">回复用户</a>
                                                            <small class="text-muted ms-2" th:text="${#temporals.format(reply.createdAt, 'yyyy-MM-dd HH:mm')}">2023-01-16 09:15</small>
                                                        </div>
                                                    </div>
                                                    <div class="comment-bubble" th:text="${reply.content}">回复内容</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 无评论提示 -->
                    <div class="text-center py-4" th:if="${comments == null || comments.isEmpty()}">
                        <i class="far fa-comment fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">暂无评论</h5>
                        <p>成为第一个评论的人吧！</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 编辑书单模态框（仅创建者可见） -->
        <div class="modal fade" id="editBooklistModal" tabindex="-1" aria-labelledby="editBooklistModalLabel" aria-hidden="true"
             sec:authorize="isAuthenticated()" th:if="${isCreator}">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editBooklistModalLabel">编辑书单</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form th:action="@{'/user/booklists/' + ${booklist.listId} + '/update'}" method="post" id="editBooklistForm">
                            <div class="mb-3">
                                <label for="listName" class="form-label">书单名称 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="listName" name="listName" 
                                       th:value="${booklist.listName}" required>
                            </div>
                            <div class="mb-3">
                                <label for="description" class="form-label">描述</label>
                                <textarea class="form-control" id="description" name="description" rows="3"
                                          th:text="${booklist.description}"></textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">颜色标签</label>
                                <div class="d-flex flex-wrap">
                                    <div class="form-check form-check-inline" th:each="color, stat : ${
                                        {'#dc3545', '#0d6efd', '#198754', '#ffc107', '#0dcaf0', '#6c757d', '#212529'}}">
                                        <input class="form-check-input" type="radio" name="colorTag" 
                                               th:id="'colorTag-' + ${stat.index}" th:value="${color}"
                                               th:checked="${booklist.colorTag == color}">
                                        <label class="form-check-label" th:for="'colorTag-' + ${stat.index}">
                                            <i class="fas fa-circle" th:style="'color:' + ${color}"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">隐私设置</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="isPrivate" name="isPrivate" value="true"
                                           th:checked="${booklist.isPrivate}">
                                    <label class="form-check-label" for="isPrivate">
                                        设为私密（仅自己可见）
                                    </label>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" form="editBooklistForm" class="btn btn-primary">保存更改</button>
                    </div>
                </div>
            </div>
        </div>
        
        <style>
            .book-list-cover {
                height: 150px;
                object-fit: cover;
                border-radius: 4px;
            }
            .book-card {
                transition: transform 0.3s ease;
            }
            .book-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            }
            .booklist-covers-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-gap: 10px;
            }
            .booklist-cover-preview-img {
                width: 100%;
                height: 180px;
                object-fit: cover;
                border-radius: 4px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .comment-bubble {
                background-color: #f8f9fa;
                padding: 10px 15px;
                border-radius: 15px;
            }
            .reply-item .comment-bubble {
                background-color: #edf3ff;
            }
            .like-button {
                cursor: pointer;
                border: none;
                background: transparent;
            }
            .like-button.liked {
                color: #dc3545 !important;
            }
            .like-button:hover {
                color: #dc3545 !important;
            }
            .like-button .fa-heart {
                transition: transform 0.3s ease;
            }
            .like-button:hover .fa-heart {
                transform: scale(1.2);
            }
        </style>
        
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // 收藏按钮功能
                const favoriteBtn = document.getElementById('favoriteBtn');
                if (favoriteBtn) {
                    favoriteBtn.addEventListener('click', function() {
                        const listId = this.getAttribute('data-list-id');
                        const isFavorited = this.getAttribute('data-is-favorite') === 'true';
                        const action = isFavorited ? 'unfavorite' : 'favorite';
                        
                        // 发送AJAX请求
                        fetch(`/api/booklist/${listId}/${action}`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="_csrf"]')?.getAttribute('content')
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.status === 200) {
                                // 更新按钮状态
                                this.setAttribute('data-is-favorite', !isFavorited);
                                if (isFavorited) {
                                    this.innerHTML = '<i class="far fa-heart"></i> 收藏';
                                } else {
                                    this.innerHTML = '<i class="fas fa-heart"></i> 已收藏';
                                    
                                    // 添加心跳动画
                                    const icon = this.querySelector('i');
                                    icon.classList.add('heart-beat');
                                    setTimeout(() => {
                                        icon.classList.remove('heart-beat');
                                    }, 1000);
                                }
                                
                                // 更新收藏数显示
                                const favoriteCountElement = document.querySelector('.fa-heart + span');
                                if (favoriteCountElement) {
                                    const newCount = parseInt(favoriteCountElement.textContent) + (isFavorited ? -1 : 1);
                                    favoriteCountElement.textContent = `${newCount} 人收藏`;
                                }
                            } else {
                                alert('操作失败: ' + data.message);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('操作失败，请稍后再试');
                        });
                    });
                }
                
                // 评论回复功能
                const replyLinks = document.querySelectorAll('.reply-link');
                replyLinks.forEach(link => {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();
                        const commentId = this.getAttribute('data-comment-id');
                        const replyForm = document.getElementById(`replyForm-${commentId}`);
                        
                        // 收起所有其他回复表单
                        document.querySelectorAll('.reply-form').forEach(form => {
                            if (form.id !== `replyForm-${commentId}`) {
                                form.style.display = 'none';
                            }
                        });
                        
                        // 切换当前回复表单的显示状态
                        replyForm.style.display = replyForm.style.display === 'none' ? 'block' : 'none';
                        
                        // 聚焦输入框
                        if (replyForm.style.display === 'block') {
                            replyForm.querySelector('input').focus();
                        }
                    });
                });
                
                // 评论点赞功能
                const likeButtons = document.querySelectorAll('.like-button');
                likeButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        const commentId = this.getAttribute('data-comment-id');
                        const isLiked = this.classList.contains('liked');
                        
                        // 发送AJAX请求
                        fetch(`/api/comment/${commentId}/like`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="_csrf"]')?.getAttribute('content')
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.status === 200) {
                                // 更新点赞状态
                                if (isLiked) {
                                    this.classList.remove('liked');
                                    this.querySelector('i').classList.replace('fas', 'far');
                                } else {
                                    this.classList.add('liked');
                                    this.querySelector('i').classList.replace('far', 'fas');
                                }
                                
                                // 更新点赞数
                                const likeCountElement = this.querySelector('.like-count');
                                likeCountElement.textContent = data.data.likes;
                            } else {
                                alert('操作失败: ' + data.message);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('操作失败，请稍后再试');
                        });
                    });
                });
            });
        </script>
    </section>
</body>
</html> 